<template>
    <div class="app-container">
        <div class="query-container">
            <el-row type="flex" justify="space-between">
                 <el-col :span="6">
                    <i class="el-icon-search"></i>
                    <span>命名空间</span>
                 </el-col>
                 <el-col :span="8"></el-col>
                 <el-col :span="4">
                 </el-col>
            </el-row>
            <div>
            </div>
        </div>
        <div style="margin-left: 20px">
            <el-button size="mini" type="danger" @click="refresh">
                刷新
            </el-button>
            <el-button
                size="mini" 
                type="primary"
                class="btn-add"
                @click="addPage()"
                >添加</el-button
            >
        </div>
        <div class="table-container">
            <el-table
                ref="roleTable"
                :data="list"
                style="width: 100%"
                border>
                <el-table-column label="序号" width="100" align="center" type="index"></el-table-column>
                <el-table-column label="命名空间" align="center" property="namespace"></el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="deletePage(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <!-- <el-pagination
                background
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="pageNum"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30]"
                :total="total"
            >
            </el-pagination> -->
        </div>
        <div class="ops-dialog">
            <el-dialog :title="edit == 1 ? '添加命名空间': '修改命名空间'" :visible.sync="editVisible" width="35%">
                <el-form :model="ns" :rules="rules" ref="editForm">
                    <el-form-item label="命名空间" label-width="80" prop="namespace">
                        <el-input v-model="ns.namespace" autocomplete="off" @keyup.enter.native="doEdit"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doEdit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {listNamespaceReq, doAddReq, deleteReq} from '@/api/namespace'

export default {
    name: 'NamespacePage',
    data() {
        return {
            ns: {
                namespace: ''
            },
            editVisible: false,
            edit: 1,
            list: [],
            rules: {
                namespace: [
                    {required: true, message: "请输入命名空间", trigger: "blur" },
                    {max: 15, message: "不能超过15个字符", trigger: "blur" }
                ]
            }
        }
    },
    created() {
        this.listNamespace()
    },
    methods: {
        listNamespace() {
            listNamespaceReq().then(res => {
                this.list = res.data.records
            })
        },
        refresh() {
            this.listNamespace()
        },
        addPage() {
            let editForm = this.$refs['editForm']
            if(editForm) {
                editForm.resetFields()
            }
            this.ns = {}
            this.editVisible = true
            this.edit = 1
        },
        doAdd() {
            this.$refs['editForm'].validate((valid) => {
                if(!valid) {
                    return 
                }
                doAddReq({namespace: this.ns.namespace}).then(res => {
                    this.refresh()
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                    this.editVisible = false
                })
            })
        },
        doEdit() {
            if(this.edit === 1) {
                this.doAdd()
            } 
        },
        deletePage(row) {
            let msg = `确定删除命名空间【${row.namespace}】?`
            this.$confirm(msg, '提示', {
                type: 'warning'
            }).then( () => {
                deleteReq({namespace: row.namespace}).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                    this.refresh()
                })
            }).catch(() => {})
        }
    }
}
</script>

<style scoped>

</style>